<template>
	<view>
		<!-- // 注册 -->
		<u-form :model="regP" :error-type="['message']" ref="uForm" style="padding: 0 100rpx;">
			<u-form-item left-icon="phone" prop="username" :left-icon-style="{color:'#fdda33',fontSize:'40rpx'}"
				:border-bottom="false">
				<u-input v-model="regP.username" placeholder="请输入手机号" :custom-style="{fontSize:'30rpx'}" />
			</u-form-item>
			<u-form-item left-icon="phone" prop="vercode" :left-icon-style="{color:'#fdda33',fontSize:'40rpx'}"
				:border-bottom="false">
				<u-input v-model="regP.vercode" placeholder="请输入验证码" :custom-style="{fontSize:'30rpx'}" />
				<view slot="right">
					<view style="color: #fff;  background-color: #fdda33;padding:0 10rpx;border-radius: 15rpx;"
						@click="handlerCode">
						{{code>=60?'获取验证码':`倒计时${code}`}}
					</view>
				</view>
			</u-form-item>

			<u-form-item left-icon="lock" prop="password" :left-icon-style="{color:'#fdda33',fontSize:'40rpx'}"
				:border-bottom="false">
				<u-input v-model="regP.password" type="password" placeholder="请输入密码(6-12位)"
					:custom-style="{fontSize:'30rpx'}" />
			</u-form-item>
			<u-button type="warning" shape="circle" :custom-style="{backgroundColor:'#fdd100'}" @click="sure">确定</u-button>
		</u-form>

	</view>
</template>

<script>
	import { user } from '@/api'
	import { validatorPw, validatorUn } from '@/pages/user/validate.js'
	export default {
		data() {
			return {
				code: 60,
				falg: true,
				regP: {
					username: '',
					password: '',
					vercode: ''
				},
				rules: {
					username: [{
						required: true,
						trigger: ['blur', 'change'],
						validator: validatorUn
					}],
					password: [{
						required: true,
						trigger: ['blur', 'change'],
						validator: validatorPw
					}],
					vercode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onReady(){
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 发送修改请求
			forget() {
				user.reqForget(this.regP).then(res => {
					if(res.code === 0) {
						uni.$u.toast('修改成功')
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/user/login/login'
							})
						},1000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 确定
			sure() {
				this.$refs.uForm.validate(vaild => {
					if(vaild) {
						this.forget()
					}
				})
			},
			handlerCode() {
				if(this.regP.username === '') {
					uni.$u.toast('手机号不能为空')
					return
				}
				if (!this.falg) {
					uni.$u.toast(`请等倒计时结束${this.code}`)
					return
				}
				this.falg = false
				let time = setInterval(() => {
					this.code--
					if (this.code < 0) {
						this.falg= true
						this.code = 60
						clearInterval(time)
					}
				}, 1000)
				this.getSms()
			},
			// 发送验证码
			getSms(){
				let params = {
					mobile: this.regP.username,
					type: 'login'
				}
				return user.reqSendSms(params).then(res => {
					if(res.code === 0) {
						uni.$u.toast(res.msg)
						this.regP.vercode = res.data
					}else {
						uni.$u.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

	.footer{
		text-align: center;
		margin: 20rpx;
		color: #fdd100;
	}
</style>
